<template>
    <div>
        <van-dropdown-menu ref="dropdown" class="memu" :z-index="zIndex">
            <van-dropdown-item :title="time.start + '-' + time.end">
                <div class="show-time">
                    <van-button
                        class="cell btn"
                        size="large"
                        @click="startSelect"
                    >
                        <span>{{ time.start }}</span>
                    </van-button>
                    <span class="cell row" style="width: fit-content">-</span>

                    <van-button
                        class="cell btn"
                        size="large"
                        @click="endSelect"
                    >
                        <span>{{ time.end }}</span>
                    </van-button>
                </div>

                <view style="padding: 5px 16px">
                    <van-button
                        type="danger"
                        block
                        round
                        @click="closeDropdown"
                    >
                        确认
                    </van-button>
                </view>
            </van-dropdown-item>
        </van-dropdown-menu>
        <van-action-sheet :show="timeDuration.show" :overlay="false">
            <van-datetime-picker
                title="选择日期"
                type="year-month"
                :value="timeDuration.currentTime"
                :min-date="1588262400000"
                :max-date="new Date().getTime()"
                @cancel.native="timeDuration.show = false"
                @confirm.native="confirmDateChange"
            />
        </van-action-sheet>
    </div>
</template>

<script>
import vanDropdownMenu from "@/wxcomponents/weapp/dist/dropdown-menu/index";
import vanDropdownItem from "@/wxcomponents/weapp/dist/dropdown-item/index";
import vanDatetimePicker from "@/wxcomponents/weapp/dist/datetime-picker/index";
import vanActionSheet from "@/wxcomponents/weapp/dist/action-sheet/index";
import dayjs from "@/lib/day.js";
export default {
    props: ["startTime", "endTime"],
    components: {
        vanDropdownMenu,
        vanDropdownItem,
        vanDatetimePicker,
        vanActionSheet,
    },
    computed: {
        // 展示在面板上的时间
        time() {
            return {
                start: dayjs(this.startTime).format("YYYY年MM月"),
                end: dayjs(this.endTime).format("YYYY年MM月"),
            };
        },
        //
    },
    methods: {
        closeDropdown() {
            console.log(this.$refs.dropdown);
            this.$refs.dropdown.toggleItem();
        },
        startSelect() {
            this.timeDuration.position = "start";
            this.timeDuration.currentTime = this.startTime;
            this.timeDuration.show = true;
        },
        endSelect() {
            this.timeDuration.position = "end";
            this.timeDuration.currentTime = this.endTime;
            this.timeDuration.show = true;
        },
        confirmDateChange({ detail }) {
            const timestamp =
                this.timeDuration.position === "end"
                    ? dayjs(detail).endOf("M").unix() * 1000
                    : detail;
            console.log(new Date(timestamp));
            this.$emit("dateChange", {
                [this.timeDuration.position == "start" ? "lTime" : "rTime"]:
                    timestamp,
            });
            this.timeDuration.show = false;
        },
    },
    data() {
        return {
            zIndex: 1,
            timeDuration: {
                show: false,
                currentTime: new Date().getTime(),
                position: "ltime",
            },
            option1: [
                { text: "全部商品", value: 0 },
                { text: "新款商品", value: 1 },
                { text: "活动商品", value: 2 },
            ],
            option2: [
                { text: "默认排序", value: "a" },
                { text: "好评排序", value: "b" },
                { text: "销量排序", value: "c" },
            ],
            value1: 0,
            value2: "a",
        };
    },
};
</script>

<style lang="less" scoped>
.menu {
    width: 100%;
}
.show-time {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    .cell {
        width: 100%;
        text-align: center;
    }
}
.btn /deep/ button {
    border: none;
    view {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
}
</style>